<template>
  <div class="head">
    <img src="@/assets/images/logo.png" alt />
    <cube-button icon="cubeic-more" @click="showDrawer"></cube-button>
    <cube-drawer ref="drawer" :data="list" @select="selectHandler" @cancel="cancelHandler"></cube-drawer>
  </div>
</template>

<script>
export default {
  name: "HomeHead",
  data() {
    return {
      isShowDrawer: false,
      list: [
        [
          { text: "全部课程", value: 0 },
          { text: "vue课程", value: 1 },
          { text: "react课程", value: 2 }
        ]
      ]
    };
  },
  methods: {
    showDrawer() {
      if (!this.isShowDrawer) {
        this.$refs.drawer.show();
        this.isShowDrawer = true;
      } else {
        this.$refs.drawer.hide();
        this.isShowDrawer = false;
      }
    },
    cancelHandler() {
      console.log("cancelHandler");
      this.isShowDrawer = false;
      // this.$refs.drawer.hide()
    },
    selectHandler(...arg) {
      console.log(...arg)
      this.isShowDrawer = false;
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
.head {
  height: 46px;
  background-color: #000;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  img {
    height: 28px;
    margin-left: 13px;
  }

  button {
    background-color: #000;
    width: 45px;
    height: 46px;
  }

  .cube-drawer {
    margin-top: 46px;
  }
}
</style>
